<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>我的画板</title>
	<link rel="icon" type="image/x-icon" href="./favicon.ico"/>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
	<div id="usingStatus">
		<svg class="icon" data-status="draw">
			<use xlink:href="#icon-pencil_tip"></use>
		</svg>
		<svg class="icon" data-status="clear">
			<use xlink:href="#icon-eraser"></use>
		</svg>
	</div>
	<div class="penstyle">
		<div id="pensize">
			<div class="widthStyle" style="width: 6px"></div>
			<div class="widthStyle" style="width:8px"></div>
			<div class="widthStyle" style="width:12px"></div>
		</div>
		<div id="pencolor">
			<div class="colorStyle red" data-color="#d81e06"></div>
			<div class="colorStyle blue" data-color="#13227a"></div>
			<div class="colorStyle yellow" data-color="#f4ea2a"></div>
			<div class="colorStyle black" data-color="#000"></div>
		</div>
	</div>
	<div id="tool">
		<svg id="clear" class="icon">
			<use xlink:href="#icon-delete"></use>
		</svg>
		<svg id="save" class="icon">
			<use xlink:href="#icon-autosave"></use>
		</svg>
	</div>

	<canvas id="canvas">

	</canvas>
	<div class="result">
		<span>长按保存</span>
		<img id="resultImg" >
		<button id="closeImg">关闭</button>
	</div>
	<script src="./jquery-3.3.1.min.js"></script>
	<script src="./svg.js"></script>
	<script src="./main.js"></script>
</body>

</html>
